<template>
   <!-- 底部内容 -->
    <div class="footer">
        <div class="container">
            <img :src="$store.state.logo" alt="" style="width: 120px">
            <div class="footer-menu">
                <!-- <div class="footer-menu-item">
                    <ul >
                        <li v-for='item in $store.state.footer' :key='item.id'>
                            {{item.title}}
                        </li>
                    </ul>
                </div> -->
                <div class="footer-menu-item" v-for='item in $store.state.footer' :key='item.id'>
                    <h1>{{item.title}}</h1>
                    <ul >
                        <li v-for='child in item.children' :key='child.id' @click='toDetail(child.id)'>
                            <template v-if='child.is_show_logo'>
								<a :href="child.link_url">
									<img :src="child.img_url" alt="" style='width : 25px'>
								</a>
							</template>
							<template v-else>
								{{child.title}}
							</template>
                        </li>
                    </ul>
                </div>
                <!-- <div class="footer-menu-item">
                    <h1>快速購買</h1>
                    <ul >
                        <li>
                            关于我们
                        </li>
                    </ul>
                </div> -->
            </div>
        </div>
        <div class="copy-right">
            @2016 - 2020 CoinCola All Rights Reserved
        </div>
    </div>
</template>

<script>
   export default {
       data() {
           return {
               
           };
       },
	   methods : {
		   toDetail (id) {
			   this.$router.push(`/content/${id}`)
		   }
	   },
   }
</script>

<style lang="less" scoped>
    @import url('../assets/css/_b.less');
    @media screen and (max-width : 670px) {
        .footer {
			padding: 40px 10px;
			background-color: rgb(226,235,251);
			.container {
				img {
					margin-bottom: 30px;
				}
				.footer-menu {
					
					.footer-menu-item {
						margin-bottom: 50px;
					}
					h1 {
						font-size: 1.5rem;
						font-weight: bold;
						margin-bottom: 20px;
					}
				}
				
			}
			.copy-right {
					text-align: center;
				}
		}
    }
    @media screen and (min-width : 670px) {
        .footer{
			padding: 50px 0 0;
			
			background: #fff;
			.container {
				width: 1200px;
				margin: 0 auto;
				.s-b();
				.footer-menu {
					.f-s();
					align-items: start;
					.footer-menu-item {
						margin: 0 50px;
						h1 {
							margin-bottom: 37px;
							font-size: 16px;
							-webkit-letter-spacing: 1px;
							-moz-letter-spacing: 1px;
							-ms-letter-spacing: 1px;
							letter-spacing: 1px;
							text-align: left;
							color: #1e2329;
						}
						li {
							display: block;
							font-size: 14px;
							-webkit-letter-spacing: 1px;
							-moz-letter-spacing: 1px;
							-ms-letter-spacing: 1px;
							letter-spacing: 1px;
							text-align: left;
							color: rgba(30,35,41,0.4);
							margin-bottom: 7px;
							cursor: pointer;
							width: -webkit-fit-content;
							width: -moz-fit-content;
							width: fit-content;
							width: -moz-fit-content;
							&:hover {
								color: @mainColor;
							}
						}
					}
				}
			}
			.copy-right {
				padding: 50px 0;
				font-size: 1.5rem;
				-webkit-letter-spacing: 0.0625rem;
				-moz-letter-spacing: 0.0625rem;
				-ms-letter-spacing: 0.0625rem;
				letter-spacing: 0.0625rem;
				text-align: center;
				color: rgba(30,35,41,0.2);
			}
		}
    }
</style>